<template>
	<view class="content">
		<view class="header" :style="{'padding-top':tops+'px'}">
			<view class="back" @click="goBack">
				<image src="../../static/9.png"></image>
			</view>

			<view class="name">新增客户资料</view>
			<view class="history" @click="history">历史记录</view>
		</view>
		<view class="tabList">
			<view class="li" :class="tabActive == index ? 'tabActive':''" v-for="(item,index) in tabList"
				@click="tabChange(index)">{{ item.text }}</view>
		</view>
		<view class="formCon" v-if="tabActive == 0">
			<view class="li">
				<input type="text" v-model="xingming" placeholder="客户姓名(必填)" />
				<input type="text" v-model="chenghu" placeholder="客户昵称(必填)" />
			</view>
			<view class="li">
				<input type="text" v-model="dianhua_zhu" placeholder="客户电话(主)(必填)" />
				<input type="text" v-model="dianhua_fu" placeholder="客户电话(辅)" />
			</view>
			<view class="li">
				<input type="text" v-model="gongsiming" placeholder="公司/档口名(必填)" />
				<picker class="picker-box" mode="selector" :range="shifouquguoList" range-key="name"
					@change="shifouquguoChange" :value="value">
					<view class="picker">
						<view v-if="shifouquguo == ''" style="color: #999;">是否去过</view>
						<view v-else>{{ shifouquguoList[shifouquguoIndex].name }}</view>
						<image class="icon" src="../../static/2.png"></image>
					</view>
				</picker>
			</view>
			<view class="li">
				<input type="text" v-model="weixinhao" placeholder="微信号" />
				<picker class="picker-box" mode="selector" :range="weixinList" range-key="name" @change="weixinChange"
					:value="value">
					<view class="picker">
						<view v-if="weixinIndex < 0" style="color: #999;">微信添加状态</view>
						<view v-else>{{ weixinList[weixinIndex].name }}</view>
						<image class="icon" src="../../static/2.png"></image>
					</view>
				</picker>
			</view>
			<view class="li">
				<input type="text" v-model="dagainianling" placeholder="大概年龄(必填)" />
				<picker class="picker-box" mode="selector" :range="xingbieList" range-key="name" @change="xingbieChange"
					:value="value">
					<view class="picker">
						<view v-if="xingbie == ''" style="color: #999;">性别</view>
						<view v-else>{{ xingbieList[xingbieIndex].name }}</view>
						<image class="icon" src="../../static/2.png"></image>
					</view>
				</picker>
			</view>
			<view class="li_1" v-for="(item,index) in kehudizhi_list">
				<input type="text" v-model="item.name" placeholder="详细地址" />
				<image class="icon" @click="addKehudizhi" src="../../static/6.png"></image>
			</view>
			<view class="li_1">
				<input type="text" v-model="dingwei" placeholder="定位导航" />
				<image @click="getMapLocation" class="icon" src="../../static/7.png"></image>
			</view>
			<view class="li_2">
				<input type="text" v-model="custom_leibie_text" placeholder="客户类别点击输入/选择" />
				<picker class="picker-box" mode="selector" :range="leibieList" range-key="mingcheng" @change="custom_leibie_textChange"
					:value="value">
					<view class="picker">
						<image class="icon" src="../../static/2.png"></image>
					</view>
				</picker>
			</view>
			<!-- <view class="li_2" @click="pickerClick('custom_leibie')">
				<view class="value_text">{{ custom_leibie == '' ? '客户印象点击输入/选择':custom_leibie_text }}</view>
				<image class="icon" src="../../static/2.png"></image>
			</view> -->

		
			<view class="addOther" @click="addImpression">
				<view>添加客户深度印象</view>
				<image src="../../static/8.png"></image>
			</view>
			<view class="addOther" @click="addSeniorData">
				<view>添加高级资料</view>
				<image src="../../static/8.png"></image>
			</view>
			<view class="addOther" @click="addGoodsType">
				<view>添加用货种类</view>
				<image src="../../static/8.png"></image>
			</view>
			<view class="addOther" @click="interactRecord">
				<view>添加沟通详情</view>
				<image src="../../static/8.png"></image>
			</view>
		</view>
		<view class="formConImg" v-if="tabActive == 1">
			<view class="li">
				<view class="title">
					<view class="line"></view>
					<view class="text">身份证正反面照片</view>
				</view>
				<view class="imgList">
					<uni-file-picker limit="2" title=""
					 @progress="progress" 
					 @success="success" 
					 @fail="fail" 
					 @select="select"
					 @delete="deleteFile"
					 >
					 </uni-file-picker>
				</view>
			</view>
			<view class="li">
				<view class="title">
					<view class="line"></view>
					<view class="text">驾驶证照片</view>
				</view>
				<view class="imgList">
					<uni-file-picker limit="2" title=""
					@select="select1"
					@delete="deleteFile1"
					></uni-file-picker>
				</view>
			</view>
			<view class="li">
				<view class="title">
					<view class="line"></view>
					<view class="text">房产证照片</view>
				</view>
				<view class="imgList">
					<uni-file-picker limit="2" title=""
					@select="select2"
					@delete="deleteFile2"
					></uni-file-picker>
				</view>
			</view>
			<view class="li">
				<view class="title">
					<view class="line"></view>
					<view class="text">老板照片</view>
				</view>
				<view class="imgList">
					<uni-file-picker limit="2" title=""
					@select="select3"
					@delete="deleteFile3"
					></uni-file-picker>
				</view>
			</view>
			<view class="li">
				<view class="title">
					<view class="line"></view>
					<view class="text">档口照片</view>
				</view>
				<view class="imgList">
					<uni-file-picker limit="2" title=""
					@select="select4"
					@delete="deleteFile4"
					></uni-file-picker>
				</view>
			</view>
			<view class="li">
				<view class="title">
					<view class="line"></view>
					<view class="text">其他照片</view>
				</view>
				<view class="imgList">
					<uni-file-picker limit="6" title=""
					@select="select5"
					@delete="deleteFile5"
					></uni-file-picker>
				</view>
			</view>
		</view>
		<button class="btn" @click="saveFormData">保存</button>

		<!-- 选择弹窗 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
			<view class="picker-box-pop">
				<view class="title">
					<view @click="closepopup">取消</view>
					<view>客户类别</view>
					<view @click="saveChecked">确认</view>
				</view>
				<view class="search-box">
					<uni-search-bar class="uni-mt-10" v-model="save_input_text" radius="5" placeholder="请输入名称"
						clearButton="auto" cancelButton="none" />
					<view class="save_input" @click="save_input">保存</view>
				</view>
				<view class="check-list uni-px-5 uni-pb-5">
					<uni-data-checkbox mode="tag" multiple v-model="checkboxValue"
						:localdata="leibieList"></uni-data-checkbox>
				</view>


			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getaddress,
		uploadImage,
		add_kehu,
		dropdownxuanxiang
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				// 姓名
				xingming: '',
				// 昵称
				chenghu: '',
				// 电话（主）
				dianhua_zhu: '',
				// 电话（辅）
				dianhua_fu: '',
				// 公司名
				gongsiming: '',
				// 是否去过
				shifouquguo: '',
				// 微信号
				weixinhao: '',
				// 微信添加状态
				weixintianjiazhuangtai: '',
				// 大概年龄
				dagainianling: '',
				// 性别
				xingbie: '',
				// 客户地址
				kehudizhi_list: [{
					name:''
				}],
				// 定位
				dingwei: '',
				// 客户类别
				kehuleibie: '1',
				// 客户印象
				kehuyinxiang: '1',
				// 身份证正反
				shenfenzheng_img_list: [],
				// 老板照片
				laoban_img_list: [],
				// 档口
				dangkou_img_list: [],
				// 房产证
				fangchanzheng_img_list: [],
				// 行驶证
				xingshizheng_img_list: [],
				// 其他
				qiti_img_list: [],

				title: 'Hello',
				tabList: [{
						text: '客户资料'
					},
					{
						text: '附件'
					}
				],
				tabActive: 0,
				shifouquguoIndex: -1,
				shifouquguoList:[{
					name: '是',
				}, {
					name: '否',

				}],
				weixinIndex: -1,
				weixinList:[{
					name: '已添加',
				}, {
					name: '未添加',
				
				}],
				xingbieIndex: -1,
				xingbieList: [{
						name: '男'
					},
					{
						name: '女'
					}
				],
			
				// 弹出多选输入框
				save_input_text: '',

				sexIndex: -1,
				tops: 0,
				height: 0,
				// 弹窗选择的类型
				picker_type: '',
				// 弹窗选择的值
				checkboxValue: [],
				// 客户类别
				custom_leibie: '',
				custom_leibie_text: '',
				// 客户类别选项
				leibieList:[],
				kehu_id:''
			}
		},
		onLoad() {
			this.getLeibie()
			this.getMapLocation()
			uni.getSystemInfo({

				success: (e) => {

					this.tops = e.statusBarHeight;

					let custom = uni.getMenuButtonBoundingClientRect();

					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;

				}

			})
			
		},
		methods: {
			
			custom_leibie_textChange(e){
				console.log(e)
			},
			
			// 获取客户类别选项
			async getLeibie(){
				let that = this
				let data={
					dropdownxuanxiang:6,
					page:1,
					size:999,
					user_id:uni.getStorageSync('userInfo').user_id
				}
				let res = await dropdownxuanxiang(data);
						console.log('获取客户类别选项',res);
						res.results.forEach(function(item) {
						    item.text = item.mingcheng
							item.value = item.dropdown_xuanxiang_id
						});
						that.leibieList = res.results
			},
			
			// 是否去过选择事件
			shifouquguoChange(e){
				console.log(e)
			   this.shifouquguoIndex = e.detail.value	
			   this.shifouquguo = this.shifouquguoList[e.detail.value].name
			},
			
			// 微信添加状态选择事件
			weixinChange(e){
				console.log(e)
			   this.weixinIndex = e.detail.value	
			   this.weixintianjiazhuangtai = this.weixinList[e.detail.value].name
			},
			
			// 微信添加状态选择事件
			xingbieChange(e){
				console.log(e)
			   this.xingbieIndex = e.detail.value	
			   this.xingbie = this.xingbieList[e.detail.value].name
			},
			
			// 添加客户地址
			addKehudizhi(){
				if(this.kehudizhi_list.length < 5){
					this.kehudizhi_list.push({
						name:''
					})
				}else{
					uni.showToast({
						title:'最多添加五个',
						duration: 2000,
						icon:'none'
					})
					
				}
			
			},
			
			// 文件上传(进度)
			// progress(e){
			// 	console.log('文件上传(进度)',e)
			// },
			// // 文件上传(成功)
			// successe(e){
			// 	console.log('文件上传(成功)',e)
			// },
			// // 文件上传(失败)
			// fail(e){
			// 	console.log('文件上传(失败)',e)
			// },
			// 身份证正反面 文件上传(选择) 
			select(e){
				let that = this
				let files = e.tempFilePaths
				for(var i = 0;i < files.length;i++){ 
					uni.uploadFile({
					   url: 'https://www.renhexinxi.cn/front_end/api/upload_image/', // 替换为你的上传API地址
					   filePath: files[i], // 附件路径
					   name: 'image',
					   formData: {}, // 可加入表单内其他参数
					   success: (res) => { //成功回调
						const result = JSON.parse(res.data) // 成功回调返回结果
						 console.log('成功回调返回结果',result)
						 that.shenfenzheng_img_list.push(result.url)
					   },
					   fail: (error) => { //失败回调
						console.log(error)
					   }		
					})
				}
			},
			// 身份证正反面 文件上传(删除)
			deleteFile(e){
				console.log('文件上传(删除)',e)
				this.shenfenzheng_img_list.splice(e.index,1)
			},
			
			// 驾驶证照片 文件上传(选择) 
			select1(e){
				let that = this
				let files = e.tempFilePaths
				for(var i = 0;i < files.length;i++){ 
					uni.uploadFile({
					   url: 'https://www.renhexinxi.cn/front_end/api/upload_image/', // 替换为你的上传API地址
					   filePath: files[i], // 附件路径
					   name: 'image',
					   formData: {}, // 可加入表单内其他参数
					   success: (res) => { //成功回调
						const result = JSON.parse(res.data) // 成功回调返回结果
						 console.log('成功回调返回结果',result)
						 that.xingshizheng_img_list.push(result.url)
					   },
					   fail: (error) => { //失败回调
						console.log(error)
					   }		
					})
				}
			},
			// 驾驶证照片 文件上传(删除) 
			deleteFile1(e){
				console.log('文件上传(删除)',e)
				this.xingshizheng_img_list.splice(e.index,1)
			},
			
			// 房产证 文件上传(选择)
			select2(e){
				let that = this
				let files = e.tempFilePaths
				for(var i = 0;i < files.length;i++){ 
					uni.uploadFile({
					   url: 'https://www.renhexinxi.cn/front_end/api/upload_image/', // 替换为你的上传API地址
					   filePath: files[i], // 附件路径
					   name: 'image',
					   formData: {}, // 可加入表单内其他参数
					   success: (res) => { //成功回调
						const result = JSON.parse(res.data) // 成功回调返回结果
						 console.log('成功回调返回结果',result)
						 that.fangchanzheng_img_list.push(result.url)
					   },
					   fail: (error) => { //失败回调
						console.log(error)
					   }		
					})
				}
			},
			// 房产证 文件上传(删除) 
			deleteFile2(e){
				console.log('文件上传(删除)',e)
				this.fangchanzheng_img_list.splice(e.index,1)
			},
			
			// 老板照片 文件上传(选择)
			select3(e){
				let that = this
				let files = e.tempFilePaths
				for(var i = 0;i < files.length;i++){ 
					uni.uploadFile({
					   url: 'https://www.renhexinxi.cn/front_end/api/upload_image/', // 替换为你的上传API地址
					   filePath: files[i], // 附件路径
					   name: 'image',
					   formData: {}, // 可加入表单内其他参数
					   success: (res) => { //成功回调
						const result = JSON.parse(res.data) // 成功回调返回结果
						 console.log('成功回调返回结果',result)
						 that.laoban_img_list.push(result.url)
					   },
					   fail: (error) => { //失败回调
						console.log(error)
					   }		
					})
				}
			},
			// 老板照片 文件上传(删除) 
			deleteFile3(e){
				console.log('文件上传(删除)',e)
				this.laoban_img_list.splice(e.index,1)
			},
			
			// 档口照片 文件上传(选择)
			select4(e){
				let that = this
				let files = e.tempFilePaths
				for(var i = 0;i < files.length;i++){ 
					uni.uploadFile({
					   url: 'https://www.renhexinxi.cn/front_end/api/upload_image/', // 替换为你的上传API地址
					   filePath: files[i], // 附件路径
					   name: 'image',
					   formData: {}, // 可加入表单内其他参数
					   success: (res) => { //成功回调
						const result = JSON.parse(res.data) // 成功回调返回结果
						 console.log('成功回调返回结果',result)
						 that.dangkou_img_list.push(result.url)
					   },
					   fail: (error) => { //失败回调
						console.log(error)
					   }		
					})
				}
			},
			// 档口照片 文件上传(删除) 
			deleteFile4(e){
				console.log('文件上传(删除)',e)
				this.dangkou_img_list.splice(e.index,1)
			},
			
			// 其他照片 文件上传(选择)
			select5(e){
				let that = this
				let files = e.tempFilePaths
				for(var i = 0;i < files.length;i++){ 
					uni.uploadFile({
					   url: 'https://www.renhexinxi.cn/front_end/api/upload_image/', // 替换为你的上传API地址
					   filePath: files[i], // 附件路径
					   name: 'image',
					   formData: {}, // 可加入表单内其他参数
					   success: (res) => { //成功回调
						const result = JSON.parse(res.data) // 成功回调返回结果
						 console.log('成功回调返回结果',result)
						 that.qiti_img_list.push(result.url)
					   },
					   fail: (error) => { //失败回调
						console.log(error)
					   }		
					})
				}
			},
			// 其他照片 文件上传(删除) 
			deleteFile5(e){
				console.log('文件上传(删除)',e)
				this.qiti_img_list.splice(e.index,1)
			},
			
			// 添加客户
			async saveFormData(type){
				let that = this
				let kehudizhi_list = []
				for(var i =0;i<this.kehudizhi_list.length;i++){
					kehudizhi_list.push(this.kehudizhi_list[i].name)
				}
				// if(!that.xingming){
				// 	uni.showToast({
				// 		title: "请输入姓名",
				// 		icon:'none'
				// 	})
				// 	return
				// }
				// if(!that.chenghu){
				// 	uni.showToast({
				// 		title: "请输入称呼",
				// 		icon:'none'
				// 	})
				// 	return
				// }
				
				let data={
					// 姓名
					xingming: that.xingming,
					// 昵称
					chenghu: that.chenghu,
					// 电话（主）
					dianhua_zhu:that.dianhua_zhu,
					// 电话（辅）
					dianhua_fu: that.dianhua_fu,
					// 公司名
					gongsiming: that.gongsiming,
					// 是否去过
					shifouquguo: that.shifouquguo,
					// 微信号
					weixinhao: that.weixinhao,
					// 微信添加状态
					weixintianjiazhuangtai: that.weixintianjiazhuangtai,
					// 大概年龄
					dagainianling: that.dagainianling,
					// 性别
					xingbie: that.xingbie,
					// 客户地址
					kehudizhi_list: JSON.stringify(that.kehudizhi_list),
					// 定位
					dingwei: that.dingwei,
					// 客户类别
					kehuleibie: that.custom_leibie_text,
					// // 客户印象
					// kehuyinxiang: '1',
					// 身份证正反
					shenfenzheng_img_list: JSON.stringify(that.shenfenzheng_img_list),
					// 老板照片
					laoban_img_list: JSON.stringify(that.laoban_img_list),
					// 档口
					dangkou_img_list: JSON.stringify(that.dangkou_img_list),
					// 房产证
					fangchanzheng_img_list: JSON.stringify(that.fangchanzheng_img_list),
					// 行驶证
					xingshizheng_img_list:JSON.stringify(that.xingshizheng_img_list),
					// 其他
					qiti_img_list:JSON.stringify(that.qiti_img_list),
					// 用户id
					user:uni.getStorageSync('userInfo').user_id
				}
				
				let res = await add_kehu (data);
			      console.log('客户添加===',res)
				  if(res.code == 0){
					  uni.showToast({
					  	title:'添加成功',
					  	duration: 2000,
					  	icon:'none'
					  })
					  that.kehu_id = res.kehu_id
					  if(type == 1){
						  uni.navigateTo({
						  	url: "/pages/impression/index?kehu_id=" + res.kehu_id
						  })
					  }else if(type == 2){
						  uni.navigateTo({
						  	url: "/pages/addSeniorData/index?kehu_id=" + res.kehu_id
						  })
					  }else if(type == 3){
						 uni.navigateTo({
						 	url: "/pages/addGoodsType/index?kehu_id=" + res.kehu_id
						 })
					  }else if(type == 4){
						 uni.navigateTo({
						 	url: "/pages/interactRecord/index?kehu_id=" + res.kehu_id
						 })
					  }
                        
				  }
			},
			

			// 打开多选弹框
			pickerClick(type) {
				this.picker_type = type
				this.$refs.popup.open('bottom')
			},

			// 多选弹窗确认选择值
			saveChecked() {
				console.log('弹窗选择的值', this.checkboxValue)
				console.log(666, this.save_input_text)
				const foundItems = this.leibieList.filter(item => this.checkboxValue.includes(item.value));
				if (this.picker_type == 'custom_leibie') {
					this.custom_leibie = this.checkboxValue
					this.custom_leibie_text = foundItems.map(item => item.text).join(', ');
					this.$refs.popup.close()
				}
				console.log(777, this.custom_leibie_text)
			},

			// 关闭多选弹框
			closepopup() {
				this.$refs.popup.close()
			},

			// 保存多选弹框输入值
			save_input() {
				if (this.save_input_text) {
					this.leibieList.push({
						text: this.save_input_text,
						value: new Date().getTime()
					})
					this.save_input_text = ''
				}

			},
			custom_leibie_textChange(e){
				console.log(666,)
				this.custom_leibie_text = this.leibieList[e.detail.value].mingcheng
			},

			goBack() {
				uni.navigateBack()
			},
			addImpression() {
				let that = this
				if(that.kehu_id){
					uni.navigateTo({
						url: "/pages/impression/index?kehu_id=" + that.kehu_id
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '请确认是否保存基本信息',
					success: function (res) {
						if (res.confirm) {
							that.saveFormData(1)
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			addSeniorData() {
				let that = this
				if(that.kehu_id){
					uni.navigateTo({
						url: "/pages/addSeniorData/index?kehu_id=" + that.kehu_id
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '请确认是否保存基本信息',
					success: function (res) {
						if (res.confirm) {
							that.saveFormData(2)
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			
			addGoodsType() {
				let that = this
				if(that.kehu_id){
					uni.navigateTo({
						url: "/pages/addGoodsType/index?kehu_id=" + that.kehu_id
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '请确认是否保存基本信息',
					success: function (res) {
						if (res.confirm) {
							that.saveFormData(3)
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			interactRecord() {
				let that = this
				if(that.kehu_id){
					uni.navigateTo({
						url: "/pages/interactRecord/index?kehu_id=" + that.kehu_id
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '请确认是否保存基本信息',
					success: function (res) {
						if (res.confirm) {
							that.saveFormData(4)
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			
			},
			
			tabChange(index) {
				this.tabActive = index
			},
			history() {
				uni.navigateTo({
					url: '/pages/customerHistory/index'
				})
			},

			// 获取当前位置
			 getMapLocation() {
				let that = this
				
				uni.getLocation({
				  type: 'gcj02',
				  success: async function(res) {
					  console.log('获取当前位置',res)
				    const latitude = res.latitude // 纬度
				    const longitude = res.longitude // 经度
				    console.log('经度：', longitude)
				    console.log('纬度：', latitude)
					let data={
						lat: latitude,
						lng:longitude
					}
					let address = await getaddress(data);
					console.log('地址信息',address)
							if (address.code == 0) {
								that.dingwei = address.results
							}
				  },
				  fail: function(err) {
				    console.log('获取经纬度失败：', err)
				  }
				})
			
				 
		

				return false
				
				// 选择地址
				uni.chooseLocation({
					success: (res) => {
						// 将获取到的地址信息存储
						this.address = res.address
						console.log(666, res)
					},
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: "是否授权当前位置",
										content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success: (tip) => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data
															.authSetting[
																'scope.userLocation'
															] === true
														) {
															uni.showToast({
																title: "授权成功",
																icon: "success",
																duration: 1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (
																	res
																) => {
																	// 将获取到的地址信息存储
																	this.address =
																		res
																		.address
																}
															})
														} else {
															uni.showToast({
																title: "授权失败",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: "调用授权窗口失败",
									icon: "none",
									duration: 1000
								})
							}
						})
					}
				});
			},

		}
	}
</script>

<style scoped>
	.content {
		padding-bottom: 100rpx;
	}

	.picker-box-pop {
		padding-bottom: 100rpx;
		font-size: 28rpx;
	}

	.picker-box-pop .search-box {
		width: 95%;
		height: 80rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.picker-box-pop .search-box .uni-mt-10 {
		width: 80%;
	}

	.picker-box-pop .search-box .save_input {
		width: 18%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-left: 2%;
		background-color: #008BDE;
		color: white;
	}

	.picker-box-pop .title {
		width: 95%;
		height: 70rpx;
		line-height: 70rpx;
		margin: auto;
		margin-top: 12rpx;
		display: flex;
		justify-content: space-between;
	}

	.picker-box-pop .title view:nth-child(1) {
		color: #999;
	}

	.picker-box-pop .title view:nth-child(3) {
		color: #008BDE;
	}

	.check-list {
		width: 90%;
		margin: auto;
		margin-top: 20rpx;
	}

	.header {
		width: 100%;
		height: 100rpx;
		line-height: 90rpx;
		position: fixed;
		top: 0;
		text-align: center;
		background-color: white;
		z-index: 100;
	}

	.header .back {
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
		margin-top: 16rpx;
		float: left;
		text-align: center;
	}

	.header .back image {
		width: 20rpx;
		height: 40rpx;

	}

	.header .name {
		height: 100%;
		line-height: 90rpx;
		margin-top: 7rpx;
		text-align: center;
	}

	.header .history {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		text-align: center;
		position: absolute;
		right: 30rpx;
		top: 26rpx;
		color: #fff;
		background-color: #008BDE;
	}

	/*#ifdef MP-WEIXIN*/
	.header .name {
		width: 33%;
		line-height: 90rpx;
		margin-right: 50rpx;
		float: left;
	}

	.header .history {
		float: left;
		position: initial;
		background-color: #008BDE;
		margin-top: 20rpx;
	}

	/*#endif*/
	.tabList {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #008BDE;
		margin: auto;
		margin-top: 130rpx;
		/*#ifdef MP-WEIXIN*/
		margin-top: 200rpx;
		/*#endif*/
		display: flex;
	}

	.tabList .li {
		width: 50%;
		text-align: center;
		color: #008BDE;
	}

	.tabActive {
		background-color: #008BDE;
		color: white !important;
	}

	.formCon {
		width: 90%;
		margin: auto;
		margin-top: 50rpx;
	}

	.formCon .li {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.formCon .li input {
		width: 44%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
	}

	.formCon .li .picker-box {
		width: 44%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
		position: relative;
	}

	.formCon .li .picker-box view {
		margin-top: 22rpx;
	}

	.formCon .li .picker-box image {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 20rpx;
		top: 18rpx;
	}

	.formCon .li_1 {
		display: flex;
		margin-top: 20rpx;
	}

	.formCon .li_1 input {
		width: 86%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
	}

	.formCon .li_1 image {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
		margin-top: 14rpx;
	}

	.formCon .li_2 {
		display: flex;
		margin-top: 20rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
	}

	.formCon .li_2 .value_text {
		width: 86%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		font-size: 26rpx;
	}

	.formCon .li_2 input {
		width: 86%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		font-size: 26rpx;
	}

	.formCon .li_2 image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		margin-top: 22rpx;
	}

	.addOther {
		width: 460rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		background: #008BDE;
		color: white;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.addOther view {
		margin-left: 50rpx;
	}

	.addOther image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 13rpx;
		margin-right: 20rpx;
	}

	.formConImg {
		width: 90%;
		margin: auto;
		margin-top: 30rpx;
	}

	.formConImg .title {
		display: flex;
	}

	.formConImg .title .line {
		width: 7rpx;
		height: 40rpx;
		margin-top: 6rpx;
		background-color: #008BDE;
	}

	.formConImg .title .text {
		margin-left: 20rpx;
	}

	.formConImg .li {
		margin-top: 40rpx;
	}

	.imgList {
		margin-top: 20rpx;
	}

	/deep/ .icon-add {
		width: 50rpx;
	}

	.btn {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		color: white;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
	}
</style>